<template>
  <div class="product-detail" v-if="product">
    <div class="detail-container">
      <!-- 商品展示区 -->
      <div class="product-showcase">
        <div class="product-image">
          <img :src="product.image" :alt="product.title">
        </div>
        <div class="product-info">
          <h1 class="product-title">{{ product.title }}</h1>
          <div class="product-price">¥{{ product.price }}</div>
          <div class="product-stats">
            <span>销量: {{ product.salesVolume }}</span>
          </div>
          <div class="button-group">
            <el-button type="primary" size="large" class="buy-button" @click="handleBuy">
              立即购买
            </el-button>
            <el-button type="danger" size="large" plain @click="addToFavorite(product.id)">
              <el-icon size="large" v-if="product.isFavorite==1">
                <StarFilled/>
              </el-icon>
              <el-icon size="large" v-else>
                <Star/>
              </el-icon>
            </el-button>

            <el-dropdown @command="handleShare">
              <el-button size="large" class="share-button">
                分享
                <el-icon class="el-icon--right">
                  <ArrowDown/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="weixin">
                    <el-icon>
                      <Wechat/>
                    </el-icon>
                    分享到微信
                  </el-dropdown-item>
                  <el-dropdown-item command="weibo">
                    <i class="fab fa-weibo"></i> 分享到微博
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 商品详情区 -->
      <div class="product-description">
        <h2>商品详情</h2>
        <div class="description-content">
          <p>{{ product.description }}</p>

          <h3>产品特点：</h3>
          <ul>
            <li v-for="(feature, index) in product.productFeatures" :key="index">
              {{ feature }}
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import {ArrowDown, Wechat} from '@element-plus/icons-vue'
import {addFavoriteApi, getProductByIdApi, removeFavoriteApi} from "@/api/ProductApi";

const route = useRoute()
const product = ref(null)

// 模拟商品数据
/*const productData = {
  1: {
    id: 1,
    title: '儿童战斗机器人',
    price: 199,
    sales: '2000+',
    rating: '98%',
    image: require('@/assets/images/1.jpg'),
    description: '这款儿童战斗机器人是一款集教育和娱乐于一体的智能玩具。它采用先进的人工智能技术，能够与儿童进行自然的语音交互，陪伴孩子学习和游戏。',
    features: [
      '智能语音交互：支持自然对话，能够回答孩子的各种问题',
      '教育功能：内置多种教育课程，包括英语、数学、科学等',
      '安全材质：采用环保ABS材质，安全无毒，适合儿童使用',
      '动作灵活：16个关点，动作灵活，能模仿多种动作',
      '远程控制：支持手机APP远程控制，家长可实时查看互动情况'
    ],
    ageRange: '6-12岁儿童',
    specs: [
      '产品尺寸：25 x 15 x 8 cm',
      '电池容量：2000mAh',
      '续航时间：约4-6小时',
      '充电时间：约2小时'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  2: {
    id: 2,
    title: '乐高星球大战圣诞倒数日历',
    price: 299,
    sales: '1800+',
    rating: '96%',
    image: require('@/assets/images/2.jpg'),
    description: '这款独特的乐高星球大战圣诞倒数日历将为您的圣诞季增添无限乐趣。每天打开一个小格子，都能发现一个精心设计的星球大战主题乐高玩具，让倒数圣诞的过程充满惊喜与期待。',
    features: [
      '24个惊喜：每天都有不同的星球大战主题乐高玩具',
      '精致设计：每个模型都经过精心设计，细节丰富',
      '收藏价值：限量发行，具有收藏意义',
      '互动玩法：可以组合所有玩具创造新场景',
      '优质材质：采用乐高标准材质，安全耐用'
    ],
    ageRange: '8岁以上',
    specs: [
      '包含24个独立玩具',
      '材质：ABS塑料',
      '包装尺寸：35 x 25 x 7 cm',
      '总重量：约800g'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  3: {
    id: 3,
    title: '外星异形树饰',
    price: 159,
    sales: '1200+',
    rating: '94%',
    image: require('@/assets/images/3.jpg'),
    description: '为您的圣诞树带来独特的科幻风格！这款外星异形树饰采用高品质材料制作，造型独特，在传统圣诞装饰中脱颖而出。夜晚还会发出神秘的荧光效果，让您的圣诞树既有节日气氛又充满未来感。',
    features: [
      '独特设计：科幻风格与节日氛围完美融合',
      '夜光效果：殊涂层，能在黑暗中发光',
      '优质材质：采用环保树脂，做工精细',
      '防摔设计：特殊材质具有一定韧性',
      '收藏价值：限量版独特设计'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '尺寸：15 x 8 x 5 cm',
      '重量：150g',
      '材质：特殊树脂',
      '发光时间：充满光约8小时'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  4: {
    id: 4,
    title: '个性化出生图表阅读书',
    price: 159,
    sales: '1500+',
    rating: '95%',
    image: require('@/assets/images/4.jpg'),
    description: '这是一本独特的个性化星座图表书籍，根据您的出生时间和地点，生成专属的星空图和详细解读。每本书都是独一无二的，包含专业的天文数据和生动的解释说明。',
    features: [
      '个性定制：根据具体出生时间地点制作',
      '专业解读：由资深占星师提供详细解释',
      '精美印刷：采用高质量纸张和印刷工艺',
      '永久保存：精装版本适合长期收藏',
      '礼盒包装：赠送精美礼盒包装'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '尺寸：A4大小（210 x 297mm）',
      '页数：120页',
      '精装硬壳',
      '含精美书签'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  5: {
    id: 5,
    title: '有个谋杀卡游戏',
    price: 89,
    sales: '3000+',
    rating: '97%',
    image: require('@/assets/images/5.jpg'),
    description: '一款充满悬疑和刺激的桌游卡牌。玩家们将扮演不同的角色，通过收集线索、分析证据来揭开谋杀案的真相。每个案件都经过精心设计，充满意想不到的转折。',
    features: [
      '多人互动：3-8人同时游戏',
      '丰富剧情：包含多个独立案件',
      '精美卡牌：优质卡牌材质',
      '可重复性：每次游戏体验都不同',
      '附带解谜道具：包含特殊道具增加游戏趣味'
    ],
    ageRange: '14岁以上',
    specs: [
      '卡牌数量：200+张',
      '游戏时长：约60-90分钟/局',
      '包含说明书和快速入门指南',
      '道具配件齐全'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  6: {
    id: 6,
    title: '成人放屁指南图书',
    price: 49,
    sales: '5000+',
    rating: '96%',
    image: require('@/assets/images/6.jpg'),
    description: '一本充满趣味性和科普知识的图书，以幽默的方式讲解人体这个有趣的自然现象。包含科学解释、有趣的历史故事和各种趣闻轶事，让您在欢笑中学习知识。',
    features: [
      '科学性：专业医生编写审核',
      '趣味性：充满幽默的插图和文字',
      '知识性：包含大量科普知识',
      '实用性：提供健康建议',
      '精美印刷：全彩印刷，优质纸张'
    ],
    ageRange: '成人读物',
    specs: [
      '页数：200页',
      '尺寸：170 x 240mm',
      '软精装',
      '含精美插图'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  7: {
    id: 7,
    title: 'iPhone 脐带充电线',
    price: 79,
    sales: '2800+',
    rating: '93%',
    image: require('@/assets/images/7.jpg'),
    description: '这款创意十足的充电线采用仿生设计，模仿脐带的外观，不仅具有独特的视觉效果，还具备出色的充电性能。柔软的材质和独特的造型让充电过程变得有趣。',
    features: [
      '快速充电：支持快充协议',
      '创意外观：独特的脐带造型',
      '耐用材质：特殊TPE材质，柔韧耐用',
      '安全保护：多重保护电路',
      '兼容性强：支持多种苹果设备'
    ],
    ageRange: '所有年龄',
    specs: [
      '长度：1.2米',
      '支持快充18W',
      '材质：TPE+尼龙编织',
      '多重安全认证'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  8: {
    id: 8,
    title: '巧克力蟾蜍',
    price: 49,
    sales: '1600+',
    rating: '92%',
    image: require('@/assets/images/8.jpg'),
    description: '这款超写实的巧克力蟾蜍采用优质比利时巧克力制作，造型逼真有趣。每一只蟾蜍都经过精心雕刻，是送给喜欢独特甜点的朋友的完美礼物。',
    features: [
      '手工制作：每只都是独一无二',
      '优质原料：采用比利时进口巧克力',
      '逼真造型：精细雕刻工艺',
      '礼盒包装：精美礼盒设计',
      '保质保鲜：特殊保鲜技术处理'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '重量：100g/只',
      '尺寸：8 x 6 x 4 cm',
      '保质期：30天',
      '储存温度：18℃以下'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  9: {
    id: 9,
    title: 'City Wood 地图',
    price: 79,
    sales: '2200+',
    rating: '96%',
    image: require('@/assets/images/9.jpg'),
    description: '精致的木质城市地图艺术品，采用高精度激光切割技术，完美还原城市街道轮廓。每一幅作品都是独特的城市印记，既可以作为艺术装饰品，也是极具意义的纪念品。',
    features: [
      '精准切割：高精度激光雕刻',
      '优质材质：进口桦木板材',
      '可定制：支持各大城市地图',
      '细节丰富：完整展现街道结构',
      '易于安装：配备挂墙配件'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '尺寸：40 x 30 cm',
      '材质：优质桦木',
      '厚度：4mm',
      '含墙配件'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  10: {
    id: 10,
    title: '吸烟老鼠标本',
    price: 169,
    sales: '800+',
    rating: '89%',
    image: require('@/assets/images/10.jpg'),
    description: '这款独特的艺术装饰品将复古风格与幽默元素完美结合。每个标本都经过专业制作，穿着复古服装的老鼠造型惟妙惟肖，是独特的艺术收藏品。',
    features: [
      '手工制作：专业标本师制作',
      '复古造型：精致的服装和配饰',
      '安全环保：无害化处理',
      '收藏价值：限量编号',
      '展示便捷：含展示底座'
    ],
    ageRange: '14岁以上',
    specs: [
      '尺寸：15 x 10 x 20 cm',
      '重量：约500g',
      '材质：混合材料',
      '含亚克力展示盒'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  11: {
    id: 11,
    title: '五颜六色的烟雾弹',
    price: 39,
    sales: '3500+',
    rating: '94%',
    image: require('@/assets/images/11.jpg'),
    description: '专业级摄影道具，可产生绚丽的彩色烟雾效果。适用于摄影、舞台表演、派对等场景，能创造出梦幻般的视觉效果。每个烟雾弹都经过安全认证。',
    features: [
      '多彩效果：提供多种颜色选择',
      '安全认证：无毒无害',
      '持久时间：单个可持续60秒',
      '便携设计：方便携带使用',
      '防潮包装：独立密封'
    ],
    ageRange: '16岁以上',
    specs: [
      '单个尺寸：15 x 3 cm',
      '燃烧时间：60秒',
      '6色可选',
      '符合安全标准'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  12: {
    id: 12,
    title: '个性化脸丑圣诞毛衣',
    price: 95,
    sales: '1800+',
    rating: '95%',
    image: require('@/assets/images/12.jpg'),
    description: '这款创意十足的圣诞毛衣可以将您的照片印制在上面，创造独特的搞笑效果。采用优质面料，舒适保暖，是圣诞派对的完美装备。',
    features: [
      '个性定制：可印制个人照片',
      '优质面料：柔软舒适',
      '保暖效果：加厚针织',
      '防褪色：专业印刷工艺',
      '多尺码：S-XXL可选'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '材质：优质棉混纺',
      '重量：约500g',
      '可机洗',
      '尺码齐全'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  13: {
    id: 13,
    title: '云音响灯',
    price: 159,
    sales: '2100+',
    rating: '97%',
    image: require('@/assets/images/13.jpg'),
    description: '造型如云朵般轻盈的智能音响，集成了氛围灯光效果。可通过APP控制音乐播放和灯光变换，营造温馨浪漫的氛围。',
    features: [
      '蓝牙连接：稳定无延迟',
      '灯光效果：可调节亮度和颜色',
      'APP控制：智能操作界面',
      '音质出众：双扬声器设计',
      '触控操作：简单直观'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '尺寸：20 x 15 x 10 cm',
      '电池容量：2000mAh',
      '蓝牙版本：5.0',
      '支持语音控制'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  14: {
    id: 14,
    title: '流变流体行星',
    price: 129,
    sales: '1600+',
    rating: '94%',
    image: require('@/assets/images/14.jpg'),
    description: '一款充满科技感的装饰品，内部充满特殊流体，通过磁力和重力作用产生类似行星运动的效果。既是艺术品也是减压玩具。',
    features: [
      '流体效果：模拟行星运动',
      '减压功能：观看具有放松效果',
      '安全材质：特制密封流体',
      '稳固底座：防滑设计',
      '永久密封：无需维护'
    ],
    ageRange: '8岁以上',
    specs: [
      '尺寸：12 x 12 x 15 cm',
      '重量：800g',
      '材质：亚克力+特制流体',
      '底座：合金材质'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  },
  15: {
    id: 15,
    title: '水墨画DIY手机壳',
    price: 149,
    sales: '2500+',
    rating: '97%',
    image: require('@/assets/images/15.jpg'),
    description: '这款创意手机壳让您能够创作独一无二的水墨艺术品。采用特殊材质，能够让您轻松创作出流动的水墨效果，每个作品都是独一无二的艺术品。制作完成后，图案会被永久固定，不会褪色或脱落。',
    features: [
      'DIY创作：自由创作，每个作品都是独一无二',
      '高清印刷：采用先进工艺，确保图案清晰持久',
      '防摔保护：采用优质TPU材质，有效保护手机',
      '简单操作：附带详细教程，轻松上手',
      '永久保存：特殊工艺使图案永久保持'
    ],
    ageRange: '适合所有年龄',
    specs: [
      '适配多种手机型号',
      '材质：环保TPU',
      '工艺：特殊水墨效果处理',
      '包含：手机壳、颜料、工具、教程'
    ],
    url: 'https://item.taobao.com/item.htm?abbucket=2&id=661024346941&ns=1&pisk=gpM-3eV6AEYkWjwMELO0-GgAWNKDSvnyr4o1Ky4lOq3xArXH48AUp2Ux8zVuFzXLpD3E-2ne4kaIR2UnZIvi40yUdF4pIdmy8te4L4E7O-tQjk_Wm7_-V8S7dFYMIsjbaU2IrM57yZ1bbrZ7AW1WD-ZU2TwQNy9XDkZhP66SRmtYukbCN_Z7lsZg2uwQAkwjckE1F9ZCNowbukwQR2wIKSf886zCpXjt_itfxkWCdxE8GCm7lXGpxuN8p0UvReMvQ7UsVrBp7_116yUqCEAx0jGSroupBEeEuXgQvq_X-7oIMqE-rFQU-YoopzmJNUoYhz37wjK1aonmeDhQM39SD8U8sx35x_y-O4kLabIebmwSufzaNI84DYDg9PPAlUimDzNt94YVdzctcqFinZXgLqlIRk3fygoIIABpHN4Tx_tvD65UNoWOofdHOQgOOoUMmmfFTSA_DPxvD65UNorYSn4cT6PD1&priceTId=2147803017339660834171075e6294&skuId=4768322049363&spm=a21n57.1.hoverItem.2&utparam=%7B%22aplus_abtest%22%3A%22b06df01b56aef078e47541d5c7085fa9%22%7D&xxc=taobaoSearch'

  }
}*/

onMounted(() => {

  const id = route.params.id
  console.log("const id="+id)
  fetchProduct(id)

})

async function fetchProduct(id) {
  console.log("fetchProduct(id)"+id)
  getProductByIdApi(id).then(res => {
    if (res.data.code == 1) {
      product.value = res.data.data;
      // 将 features 字符串根据逗号分割成数组
      if (product.value.productFeatures && typeof product.value.productFeatures === 'string') {
        product.value.productFeatures = product.value.productFeatures.split(',').map(feature => feature.trim());
      }
    } else {
      ElMessage.error(res.data.msg)
    }

  })
}

const handleBuy = () => {
  //打开链接
  window.open(product.value.url, '_blank')
}
// 添加到收藏
const addToFavorite = (id) => {
    if(!localStorage.getItem('token')){
      ElMessage.warning('请先登录')
      return
    }
    if (product.value.isFavorite == 1) {
      removeFavoriteApi(id).then(res => {
        console.log(res.toString())
        if (res.data.code == 1) {
          product.value.isFavorite = 0
          ElMessage.warning('已从收藏中移除')
        } else {
          ElMessage.error(res.data.msg)
        }
      })
    } else {
      addFavoriteApi(id).then(res => {
        if (res.data.code == 1) {
          product.value.isFavorite = 1
          ElMessage.success('已添加到收藏');
        }else if (res.data.code == 0) {
          ElMessage.error(res.data.msg)
        }
      })

    }



};
const handleShare = (platform) => {
  const shareUrl = window.location.href
  const shareTitle = product.value.title
  const shareText = `${shareTitle}\n${product.value.description}`

  switch (platform) {
    case 'weixin':
      // 这里可以调用微信分享 SDK
      ElMessage.success('微信分享功能开发中...')
      break
    case 'weibo': {
      const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareText)}&pic=${encodeURIComponent(product.value.image)}&appkey=YOUR_APP_KEY`
      window.open(weiboUrl, '_blank')
      break
    }
  }
}
</script>

<style scoped>
.product-detail {
  background-color: #f5f5f5;
  padding: 20px 0;
  min-height: 100vh;
}

.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.product-showcase {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.product-image {
  flex: 0 0 500px;
}

.product-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info {
  flex: 1;
  padding: 20px 0;
}

.product-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.product-price {
  font-size: 28px;
  color: #ff6b6b;
  font-weight: bold;
  margin-bottom: 20px;
}

.product-stats {
  display: flex;
  gap: 20px;
  color: #666;
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.buy-button {
  width: 180px;
  height: 50px;
  font-size: 18px;
}

.share-button {
  height: 50px;
  font-size: 18px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* 修改下拉菜单的样式 */
:deep(.el-dropdown-menu) {
  min-width: 160px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  line-height: 1.5;
  font-size: 14px;
}

/* 图标样式 */
.el-dropdown-menu .el-icon,
.el-dropdown-menu .fab {
  margin-right: 12px;
  font-size: 18px;
  width: 18px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fab.fa-weibo {
  color: #e6162d;
}

.el-icon.wechat {
  color: #07c160;
}

/* 下拉菜单项悬停效果 */
:deep(.el-dropdown-menu__item:hover) {
  background-color: #f5f7fa;
}

:deep(.el-dropdown-menu__item:hover .el-icon),
:deep(.el-dropdown-menu__item:hover .fab) {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.product-description {
  padding: 20px 0;
}

.product-description h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.description-content {
  color: #666;
  line-height: 1.8;
}

.description-content h3 {
  font-size: 18px;
  color: #333;
  margin: 20px 0 10px;
}

.description-content ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.description-content li {
  margin-bottom: 8px;
}
</style> 